<template>
  <div><v-chart :option="option" style="height: 800px" /></div>
</template>

<script setup>
  import { ref } from 'vue'
  const option = ref({
    title: {
      text: 'Basic Graph',
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
      {
        type: 'graph',
        layout: 'none',
        symbol: 'rect',
        symbolSize: 78,
        roam: false,
        label: {
          show: true,
        },
        edgeSymbol: [],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
          fontSize: 20,
        },
        data: [
          {
            id: '0',
            name: 'Data Plane',
            x: 510,
            y: 90,
          },
          {
            id: '1',
            name: 'User Plane',
            x: 580,
            y: 90,
          },
          {
            id: '2',
            name: 'Control Plane',
            x: 545,
            y: 100,
          },
          {
            id: '3',
            name: 'Service Proxy',
            x: 545,
            y: 120,
          },
          {
            id: '5',
            name: 'Service Proxy',
            x: 510,
            y: 150,
          },
          {
            id: '6',
            name: 'Control Plane',
            x: 500,
            y: 170,
          },
          {
            id: '7',
            name: 'User Plane',
            x: 480,
            y: 190,
          },
          {
            id: '8',
            name: 'Data Plane',
            x: 520,
            y: 190,
          },
          {
            id: '9',
            name: 'RAN',
            x: 450,
            y: 190,
          },
          {
            id: '10',
            name: 'UE',
            x: 430,
            y: 190,
          },
          {
            id: '11',
            name: 'Service Proxy',
            x: 580,
            y: 150,
          },
          {
            id: '12',
            name: 'Control Plane',
            x: 590,
            y: 170,
          },
          {
            id: '13',
            name: 'Data Plane',
            x: 570,
            y: 190,
          },
          {
            id: '14',
            name: 'User Plane',
            x: 610,
            y: 190,
          },
          {
            id: '15',
            name: 'RAN',
            x: 640,
            y: 190,
          },
          {
            id: '16',
            name: 'UE',
            x: 660,
            y: 190,
          },
          {
            id: '17',
            name: '',
            x: 545,
            y: 88,
            itemStyle: {
              color: 'transparent',
            },
            label: {
              show: true,
              position: 'inside',
              formatter: '中心节点\n\nIP:172.28.158.99',
              fontSize: 18,
              color: 'black',
            },
          },
          {
            id: '18',
            name: '',
            x: 485,
            y: 150,
            itemStyle: {
              color: 'transparent',
            },
            label: {
              show: true,
              position: 'inside',
              formatter: '分布式节点\n\nIP:172.28.158.98',
              fontSize: 18,
              color: 'black',
            },
          },
          {
            id: '19',
            name: '',
            x: 605,
            y: 150,
            itemStyle: {
              color: 'transparent',
            },
            label: {
              show: true,
              position: 'inside',
              formatter: '分布式节点\n\nIP:172.28.158.130',
              fontSize: 18,
              color: 'black',
            },
          },
          {
            id: '20',
            name: '',
            x: 440,
            y: 178,
            itemStyle: {
              color: 'transparent',
            },
            label: {
              show: true,
              position: 'inside',
              formatter: '基站B',
              fontSize: 18,
              color: 'black',
            },
          },
          {
            id: '21',
            name: '',
            x: 650,
            y: 178,
            itemStyle: {
              color: 'transparent',
            },
            label: {
              show: true,
              position: 'inside',
              formatter: '基站A',
              fontSize: 18,
              color: 'black',
            },
          },
        ],
        links: [
          {
            source: '2', // 第一个节点的索引
            target: '0', // 第二个节点的索引
          },
          {
            source: '2', // 第二个节点的索引
            target: '1', // 第三个节点的索引
          },
          {
            source: '2', // 第二个节点的索引
            target: '3', // 第三个节点的索引
          },
          {
            source: '6',
            target: '5',
          },
          {
            source: '6',
            target: '7',
          },
          {
            source: '6',
            target: '8',
          },
          {
            source: '7',
            target: '9',
          },
          {
            source: '9',
            target: '10',
          },
          {
            source: '12',
            target: '11',
          },
          {
            source: '12',
            target: '13',
          },
          {
            source: '12',
            target: '14',
          },
          {
            source: '14',
            target: '15',
          },
          {
            source: '15',
            target: '16',
          },
          {
            source: '12',
            target: '15',
          },
          {
            source: '9',
            target: '6',
          },
          {
            source: '3',
            target: '5',
          },
          {
            source: '3',
            target: '11',
          },
          {
            source: '5',
            target: '11',
          },
        ],
        lineStyle: {
          opacity: 0.9,
          width: 2,
          curveness: 0,
        },
      },
    ],
  })
</script>
<style></style>
